<template>
  <div class="table-pagination" style="text-align:right;padding-top:5px">
    <el-pagination background :page-size.sync="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
      @current-change="handleChange" @size-change="handleChange" layout="sizes, prev, pager, next, jumper, total" :page-sizes="pageSizes">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    props: {
      pagination: {
        type: Object,
        required: true
      },

      pageSizes: {
        type: Array,
        default: function () {
          return [10, 20, 50, 100];
        }
      }
    },

    data() {
      return {};
    },

    methods: {
      handleChange() {
        let timeout = this.timeout;
        if (timeout !== null) {
          clearTimeout(timeout);
        }

        let self = this;
        this.timeout = setTimeout(function () {
          self.$emit('change', self.pagination);
          self.timeout = null;
        }, 20);
      }
    }
  };

</script>

<style lang="scss" scoped>


</style>
